<template>
  <div>
    app根组件
    <!--图书列表组件-->
    <booklist>
      <template #biaodan="item">
        <!-- {{ item }} -->
        <button @click="add">添加</button>
        <button @click="edit(item.item.id)">编辑</button>
        <button @click="del(item.item.id)">删除</button>
      </template>
    </booklist>

    <!--添加&编辑对话框-->
    <addbook :flag="flag" :title="title">
      <template>
        <form>
          作者:<input type="text" v-model="bookobj.author" /> 书名
          <input type="text" v-model="bookobj.bookname" /> 出版社
          <input type="text" v-model="bookobj.publisher" />
          <div>
            <button @click="quxiao">取消</button>
            <button @click="queren">确认</button>
          </div>
        </form>
      </template>
    </addbook>
  </div>
</template>
<script>
import booklist from './book/booklist.vue'
import addbook from './book/addbook.vue'
import { mapState } from 'vuex'
export default {
  name: '',
  components: { booklist, addbook },
  data () {
    return {
      title: '添加页面',
      flag: false,
      bookobj: { author: '', bookname: '', publisher: '' },
      id: ''
    }
  },
  created () {
    // console.log(this.$store.state['list']);
    this.getbooklist()
    console.log(this.newArr);
  },

  methods: {
    //添加
    add () {
      this.title = '添加页面'
      this.flag = true
      this.bookobj.bookname = ''
      this.bookobj.publisher = ''
      this.bookobj.author = ''
    },

    //取消按钮
    quxiao () {
      this.flag = false
    },
    //确认按钮
    queren () {
      if (Object.values(this.bookobj).includes('')) {
        return alert('请输入内容')
      }
      if (this.title === '添加图书') {
        this.addbooklist()
        this.flag = false
      } else {
        this.$store.dispatch('updatebook', this.bookobj, this.id)
      }

    },
    //删除按钮
    del (id) {
      // console.log(typeof id);
      this.$store.dispatch('delbook', id)
      this.getbooklist()
    },
    //编辑按钮
    async edit (id) {
      this.id = id
      this.flag = true
      this.title = '编辑页面'
      const result = await this.$store.dispatch('editbook', id)
      // console.log(result[0].bookname);
      this.bookobj.bookname = result[0].bookname
      this.bookobj.publisher = result[0].publisher
      this.bookobj.author = result[0].author
    },


    //获取图书列表接口
    getbooklist () {
      this.$store.dispatch('getbook')
    },
    //添加图书列表接口
    addbooklist () {
      this.$store.dispatch('addbook', this.bookobj)
    },
    //获取编辑图书详情
    editbooklist () {

    },
  }


}
</script>
<style lang='less'  scoped>
</style>
